<!-- 消息通知 - 详情 -->
<script setup>
import { onLoad, onReachBottom } from '@dcloudio/uni-app'
import { reactive } from 'vue'
// 全局数据
const data = reactive({
  info: '平台回购用户xxxxxxx商品，回收后将'
})
// 前往回收页面
function goRecovery() {
  uni.navigateTo({
    url: '/subPackage/my/message/recovery'
  })
}
</script>

<template>
  <view class="message-detail-page">
    <!-- 消息标题 -->
    <view class="title">
      <text>这是通知标题这是通知标题这是通知标题这是</text>
    </view>
    <!-- 消息类型和时间 -->
    <view class="head">
      <text class="type-name">普通通知</text>
      <text class="time">今天08:20</text>
    </view>
    <!-- 线 -->
    <view class="line">

    </view>
    <!-- 回收商品信息 -->
    <view class="shop-box">
      <view class="img-box">
        <image style="width: 202rpx; height: 202rpx;" src="https://cdn.uviewui.com/uview/goods/2.jpg"></image>
      </view>
      <view class="info">
        <view class="name">
          <text>回收商品名称回收商品名称回收商品名</text>
        </view>
        <view class="desc">
          <text>规格：商品规格名称商品规格名称商品规格名</text>
        </view>
        <view class="num">
          <text>数量：5</text>
        </view>
      </view>
    </view>
    <!-- 富文本 -->
    <view class="rich-text-box">

      <rich-text :nodes="data.info"></rich-text>
    </view>
    <!-- 回收按钮 -->
    <view class="btn-box">
      <up-button text="确认回收" @click="goRecovery"></up-button>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.message-detail-page {
  box-sizing: border-box;
  padding: 30rpx 50rpx;
  min-height: 100vh;
  background-color: #F9F9F9;

  // 消息标题
  & .title {
    font-weight: 500;
    font-size: 30rpx;
    color: #333333;
  }

  // 消息类型和时间
  & .head {
    margin-top: 20rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 400;
    font-size: 24rpx;
    color: #333333;
  }

  // 线
  & .line {
    margin-top: 30rpx;
    height: 0rpx;
    border: 1rpx solid #333333;
  }

  // 回收商品信息
  & .shop-box {
    margin-top: 30rpx;
    padding: 30rpx;
    display: flex;
    align-items: center;
    background: #FFFFFF;
    border-radius: 10rpx;

    & .img-box {
      width: 202rpx;
      height: 202rpx;
      border-radius: 10rpx;
      overflow: hidden;
    }

    & .info {
      margin-left: 30rpx;

      & .name {
        font-weight: 500;
        font-size: 28rpx;
        color: #333333;
      }

      & .desc {
        margin-top: 10rpx;
        font-weight: 400;
        font-size: 24rpx;
        color: #333333;
      }

      & .num {
        margin-top: 10rpx;
        font-weight: 400;
        font-size: 24rpx;
        color: #333333;
      }
    }
  }

  // 富文本
  & .rich-text-box {
    margin-top: 30rpx;

    & rich-text {
      font-weight: 400;
      font-size: 28rpx;
      color: #333333;
      line-height: 40rpx;
    }
  }

  // 回收按钮
  & .btn-box {
    position: fixed;
    bottom: 72rpx;
    left: 0;
    right: 0;
    margin: auto;

    &::v-deep .u-button {
      width: 690rpx;
      height: 100rpx;
      font-weight: 500;
      font-size: 32rpx;
      color: #FFFFFF;
      background: #FFA618;
      border-radius: 50rpx;
    }

  }
}
</style>